<!-- 举手 -->
<template>
	<div class="pannel">
		<div class="cardbox flex flex-v">
			<div class="bind-con">
				<div class="bind-hd">
					<span class="class">{{ formData.className }}</span>
					<span style="margin-left: 40px">
						举手人数：
						<span class="hasBindValue">{{ showUserList.length }}</span>
					</span>
				</div>
				<div class="bind-bd">
					<div class="list">
						<div style="height: calc(100% - 40px); overflow: auto; padding: 0 20px">
							<div class="sign-con">
								<div
									v-for="(item, index) in showUserList"
									class="sign-item flex flex-v flex-align-center bigtosmall"
								>
									<img src="/impromptu/gou_selected.png" />
									{{ item.studName }}
								</div>
							</div>
							<div class="tips">
								请同学按
								<b class="high">“FN+F键”</b>
								进行举手
							</div>
						</div>
					</div>
				</div>
			</div>
			<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
		</div>
		<!-- <div class="conbox-ft flex flex-align-center flex-pack-justify">
			<div @click="toggleSign" class="ft-btn save-btn" :class="{ red: isFeedback }">
				{{ isFeedback ? '停止反馈' : '开始反馈' }}
			</div>
		</div> -->
		<div class="topicType">
			<img :src="`/impromptu${isPro ? '_pro' : ''}/topicType.png`" class="img" />
			<span class="name">举手</span>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

import bus from '@/utils/eventBus';
import { debounce } from '@/utils/base.js';
export default {
	name: 'hand',
	components: {},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			showUserList: [],
		};
	},
	created() {
		this.addOpr();
	},

	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
		}),
	},

	methods: {
		updateList(list) {
			this.showUserList = [...list];
		},
		//返回
		reback() {
			this.$emit('checkMenu', { type: 'hand' });
		},
		addOpr() {
			this.$postAction(this.$sysManageapi.answerUrl.addOpr, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
				opType: 'hand',
				userId: this.userinfo.userId,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.pageView {
	width: 100%;
	height: 100vh;
}
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	// padding: 50px 0 30px;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
/* **头部题目类型** */
.topicType {
	width: 304px;
	height: 100px;
	line-height: 100px;
	position: fixed;
	top: 0;
	left: 49px;
	z-index: 7;
	.img {
		width: 304px;
		height: 100px;
		position: absolute;
		right: 0;
	}
	.name {
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #fff;
	}
	@media screen and (max-width: 1366px) {
		width: 254px;
		height: 80px;
		line-height: 80px;
		.img {
			width: 254px;
			height: 80px;
		}
		.name {
			font-size: 28px;
		}
	}
}
.cardbox {
	overflow: visible;
	height: 100%;
	position: relative;
	margin-top: 0;
	padding-top: 15px;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.bind-con {
	height: calc(100vh - 100px);
	background: rgb(255, 255, 255);
	border-radius: 8px;
}

.bind-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	margin-top: 30px;

	.class {
		letter-spacing: -1px;
	}

	.sign {
		margin: 0 40px;
	}

	.no-connect {
		color: @warning-color;
	}

	.connect {
		color: @primary-color;
	}
}

.bind-bd {
	width: 1162px;
	height: calc(100% - 92px);
	margin: 30px auto 0;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}

	.bind-ft {
		position: absolute;
		bottom: 0;
		left: -5px;
		right: 0;

		.bg {
			width: 231px;
			height: 79px;
		}

		.operate {
			position: absolute;
			right: 60px;
			bottom: 30px;
			font-size: 22px;
			color: #4d5053;
			cursor: pointer;
			background-color: #fff;

			img {
				width: 24px;
				height: 24px;
				margin-right: 12px;
			}
		}
	}

	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 20px;
		color: #2e2424;
		padding: 20px 32px 40px;
		overflow: auto;

		.sign-con {
			display: grid;
			grid-template-columns: repeat(8, calc((100% - 200px) / 8));
			row-gap: 25px;
			column-gap: 30px;
			line-height: 1;
			height: 0;
			.sign-item {
				color: #2e2424;
				font-size: 24px;
				img {
					width: 60px;
					height: 60px;
				}
			}
		}
	}
}
.tips {
	position: absolute;
	bottom: 22px;
	left: 30px;
	right: 30px;
	text-align: center;
	font-size: 20px;
	color: #242424;
	font-weight: bold;
	z-index: 9;
	background-color: #fff;
	padding-bottom: 30px;
	.high {
		color: @primary-color;
	}
}
.conbox-ft {
	width: 1162px;
	margin: 35px auto 0;
	padding: 10px 0;
	.save-btn {
		background: @primary-color;
		margin: 0 auto;
		width: 300px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		border-radius: 40px;
		cursor: pointer;
		&.red {
			background: #e64343;
			border-color: rgba(230, 67, 67, 0.5);
		}
	}
	.save-btn.disabeld {
		background: #becad4;
	}
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
</style>

<style scoped>
.sign-item.bigtosmall {
	-webkit-animation: bigtosmall 1s ease forwards;
	opacity: 1;
}
@keyframes bigtosmall {
	0% {
		transform: scale(0.1);
		opacity: 0;
	}
	70% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes bigtosmall {
	0% {
		-webkit-transform: scale(0.1);
		opacity: 0;
	}
	70% {
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
</style>
